<template>
	<div class="page">
		<banner :height="bannerHeight"></banner>
		<content :height="bannerHeight" :listData="listData"></content>
		<bottom :data="listData" :price="total" :height="bottomHeight"></bottom>
		<!-- <buys :data="totalArr"></buys> -->
	</div>
</template>

<script setup>
import {ref,reactive,onMounted,nextTick,computed,watch} from "vue"
import { useRouter, useRoute } from 'vue-router'
import banner from "../components/banner.vue"
import content from "../components/content.vue"
import bottom from "../components/bottom.vue"
import buys from "../components/buys.vue"
import {initWs,getList} from "/api"
const router=useRouter()
const route=useRoute()
const bannerHeight=ref(150)
const bottomHeight=ref(50)
const emit=defineEmits(["fl"])
const thisFl=ref("")
const contentHeight=computed(()=>{
	return bannerHeight.value+bottomHeight.value
})
let obj=[]
const total=computed(()=>{
	return listData.value.reduce((prev, cur)=>{
		return prev+cur.data.reduce((i, j)=>{
			return i+j.num*j.price
		},0)
	},0)
})
function goId(id){
	thisFl.value="#f"+id
	location.hash=thisFl.value
}
onMounted(()=>{
	nextTick(()=>{
		let fl=document.querySelectorAll(".fl")
		console.log("fl:",fl);
		fl.forEach((item,index)=>{//记录
			let min=obj[index-1]?.max||0,
				max=min+item.clientHeight
			obj.push({
				min,
				max,
				value:item.id
			})
		})
		thisFl.value=obj[0]?.value
		obj=ref(obj)

		//开始数据同步
		const ws=initWs({code:0,id:1},(msg)=>{
			console.log("msg:",msg.data);
		})
		console.log("ws:",ws);
	})
})

let listData=ref([])
watch(()=>listData.value,(val)=>{

	console.log("val:",val);
	return false
},{deep:true})
getList().then(res=>{
	if(res.code===0){
		let data=res.data.map(item=>{
			return Object.assign(item,{data:item.data.map(i=>(Object.assign(i,{num:0})))})
		})
		listData.value=data
		// emit('change',listData.value)

	}else{
		listData.value=[]
	}
})

function rightScroll(e){
	obj.value.some(item=>{
		if(e.srcElement.scrollTop>=item.min&&e.srcElement.scrollTop<item.max){
			if(thisFl.value!==item.value){
				thisFl.value=item.value
				console.log("1:",item.value);
			}
			return true
		}
	})
}

</script>

<style scoped>
.page{
	height: 100vh;
}
</style>